<template>
  <page-content>
    <space class="my-0">
      <search-form 
        v-if="showSearch"
        :showSearch="showSearch" 
        :popover="false"
        :metaid="metaid"
        :fields="search"
      />
    </space>
    <space class="my-1">
      <option-form 
        :anySelected="!anySelected"
        :pass_delete="pass_delete"
        :pass_force_delete="pass_force_delete"
        :pass_restore="pass_restore"
        :pass_truncate="pass_force_delete"
        :selectedCount="selectedCount"
        :metaid="metaid"
        :selectedRowKeys="selectedRowKeys"
      />
    </space>

    <a-table
      row-key="id"
      :data-source="adminPermissions"
      :fixed="this.fixed"
      :scroll="{ x: this.width }"
      bordered
      :pagination="false"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <a-table-column 
        title="ID" 
        data-index="id" 
        :width="150"
      />
      <a-table-column 
        title="名称" 
        data-index="name" 
        :width="150"
      />
      <a-table-column 
        title="标识" 
        data-index="slug" 
        :width="150"
      />
      <a-table-column 
        title="路由" 
        :width="300"
      >
        <template #default="record">
          <route-show :data="record"/>
        </template>
      </a-table-column>
      <a-table-column 
        title="创建时间" 
        data-index="created_at" 
        :width="150"
      />
      <a-table-column 
        title="更新时间" 
        data-index="updated_at" 
        :width="150"
      />
      <a-table-column 
        title="操作" 
        :width="200" 
        :fixed="this.fixed_right"
      >
        <template #default="record">
          <space>
            <router-link class="text-color" :to="`/admin-permissions/${record.id}`">查看</router-link>
            <router-link v-if="!record.deleted_at && pass_put" :to="`/admin-permissions/${record.id}/edit`">编辑</router-link>
            <lz-popconfirm v-if="!record.deleted_at && pass_delete" :confirm="destroyAdminPermission(record.id)">
              <a class="error-color" href="javascript:void(0);">删除</a>
            </lz-popconfirm>
            <lz-popconfirm v-if="record.deleted_at && pass_restore" :confirm="restore(record.id)">
              <a class="success-color"  href="javascript:void(0);">恢复</a>
            </lz-popconfirm>
            <lz-popconfirm v-if="record.deleted_at && pass_force_delete" :confirm="forceDelete(record.id)">
              <a class="error-color"  href="javascript:void(0);">彻底删除</a>
            </lz-popconfirm>
          </space>
        </template>
      </a-table-column>
    </a-table>
    <lz-pagination :page="page"/>
  </page-content>
</template>

<script>
import LzPagination from '@c/LzPagination'
import LzPopconfirm from '@c/LzPopconfirm'
import PageContent from '@c/PageContent'
import SearchForm from '@c/SearchForm'
import OptionForm from '@c/OptionForm'
import Space from '@c/Space'
import {
  destroyAdminPermission,
  getAdminPermissions,
} from '@/api/admin-permissions'
import {arrayWrap, changeQuery, changeList, can} from '@/libs/utils'
import FilePreview from '@c/FilePreview'
import DocPreview from '@c/DocPreview'
import RouteShow from './components/RouteShow'
import {restore, forceDelete} from '@/api/common'


export default {
  name: 'Index',
  scroll: true,
  components: {
    LzPopconfirm,
    PageContent,
    LzPagination,
    Space,
    SearchForm,
    OptionForm,
    FilePreview,
    DocPreview,
    RouteShow
  },
  data() {
    return {
      showSearch:true,
      search: [
        {
          field: 'id',
          label: 'ID',
        },
        {
          field: 'name',
          label: '名称',
        },
        {
          field: 'slug',
          label: '标识',
        },
        {
          field: 'http_method',
          label: '方法',
          type: 'multiple_select',
          options: [
            {name: "GET"},
            {name: "POST"},
            {name: "PUT"},
            {name: "DELETE"},
            {name: "PATCH"},
            {name: "OPTIONS"},
            {name: "HEAD"}
          ],
          labelField: 'name',
          valueField: 'name'
        },
        {
          field: 'http_path',
          label: '路径',
        },
      ],
      list: [],
      adminPermissions: [],
      page: null,
      width: 1200,
      fixed: false,
      fixed_right: false,
      metaid: this.$route.meta.id,
      selectedRowKeys: [],
    }
  },
  computed: {
    anySelected() {
      return this.selectedCount > 0
    },
    selectedCount() {
      return this.selectedRowKeys.length
    },
    pass_put() {
      return can('pass-put-admin-permissions')
    },
    pass_delete() {
      return can('pass-delete-admin-permissions')
    },
    pass_restore() {
      return can('pass-restore')
    },
    pass_force_delete() {
      return can('pass-force-delete')
    },
  },
  methods: {
    arrayWrap,
    onRefresh() {
      this.$router.replace({
        path: this.$route.fullPath,
        query: {
          _refresh: Date.now(),
        },
      })
    },
    restore(id){
      return async () => {
        await restore(this.metaid, id)
        this.onRefresh()
      }
    },
    forceDelete(id){
      return async () => {
        await forceDelete(this.metaid, id)
        this.onRefresh()
      }
    },
    destroyAdminPermission(id) {
      return async () => {
        await destroyAdminPermission(id)
        this.onRefresh()
      }
    },
    async onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
  },
  watch: {
    $route: {
      async handler(newVal) {
        newVal = changeQuery(newVal)
        const { data: { data, meta } } = await getAdminPermissions(newVal.query)
        this.adminPermissions = data
        const { list } = changeList(this.list, data)
        this.list = list
        this.page = meta
        this.fixed_right = 'right'
        this.$scrollResolve()
      },
      immediate: true,
    },
  },
}
</script>
